<template>
    <el-menu
        :default-active="currentIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
        router
    >
        <el-menu-item index="/">商品管理</el-menu-item>
        <el-menu-item index="/params">规格参数</el-menu-item>
        <el-menu-item index="/content">内容分类管理</el-menu-item>
        <el-menu-item  class="login" >
          <router-link to="/ucenter" tag="span" class="user-name">{{username}}</router-link>
          <el-button @click="logout">退出登录</el-button>
        </el-menu-item>
    </el-menu>
</template>

<script>
import {mapMutations,mapState} from 'vuex'
export default {
    data(){
        return{
            currentIndex:"/"
        }
    },
    mounted(){
      /* 高亮初始化 */
      if(sessionStorage.getItem("key")){
        this.currentIndex=sessionStorage.getItem("key")
      }
    },
    computed:{
      ...mapState('loginModule',['username'])
    },
    methods:{
      ...mapMutations("loginModule",['clearToken','clearUsername']),
        handleSelect(key){
            sessionStorage.setItem("key",key)
        },
        logout(){
          /* 
          1清除store 2清除本地 3回到登录页
          */
         this.clearToken();
         this.clearUsername();
         localStorage.removeItem('ego');
         this.$router.replace('/login')
        }
    }
};
</script>

<style scoped>
.login{
  float: right!important;
}
.user-name{
  color: white;
  margin-right: 10px;
  font-size: 15px;
  border: 1px solid #fff;
  border-radius: 50%;
  width:40px;
  height: 40px;
  display: inline-block;
  line-height: 40px;
}
</style>